<template lang="pug">
  .tu-prompt-white-mask
    form.tu-prompt(@submit.prevent="submit")
      h5.tu-prompt-title {{title}}
      input(
        v-if="!multiple"
        type="text"
        v-model="val"
        :placeholder="placeholder"
        autofocus
        )
      textarea(
        v-if="multiple"
        type="text"
        v-model="val"
        @keydown="autosize"
        :placeholder="placeholder"
        autofocus
        )

      .tu-btn-group
        input.tu-btn.tu-btn-cancel(
          type="button"
          value="cancel"
          @click="hide"
          )
        .tu-btn-gap
        input.tu-btn.tu-btn-submit(
          type="submit"
          value="submit"
          )
</template>

<script>
export default {
  data () {
    return {
      val: ''
    }
  },
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '',
    },
    title: String,
  },
  computed: {
  },
  methods: {
    autosize (ev) {
      const el = ev.target
      this.$nextTick(() => {
        el.style.cssText = 'height:auto'
        el.style.cssText = 'height:' + el.scrollHeight + 'px'
      })
    },
    reset () { this.val = '' },
    hide () {
      this.$emit('closePrompt')
      this.reset()
    },
    submit () {
      this.$emit('submit', this.val || this.placeholder)
      this.reset()
    }
  }
}
</script>

<style lang="stylus">
@import '~assets/stylus/variables.styl'
.tu-prompt-white-mask
  position: fixed
  left 0
  top 0
  z-index: 10000
  width 100vw
  height 100vh
  background rgba(0, 0, 0, .5)
.tu-prompt
  width: 32rem
  margin: 10rem auto
  padding 1rem 2rem
  border-radius: 5px
  background: $color-bg
  input[type="text"],
  textarea
    padding 1rem
    width 100%
  textarea
    overflow:hidden;
    display:block;
    border none
    resize none
.tu-prompt-title
  padding 1rem 0 1.5rem 0
.tu-btn-group
  display flex
  margin-top 1rem
  align-content space-between
.tu-btn
  flex 1
  margin: 1rem 0;
  padding 1rem
  color $color-white
.tu-btn-gap
  width: 2rem
.tu-btn-cancel
  background: $color-warning
.tu-btn-submit
  background: $color-primary
</style>
